<template>
  <div>
    <div class="box">
      <div class="list-view" ref="listView">
        <ul>
          <li v-for="group in singers" class="list-group" :key="group.id" ref="listGroup">
            <h2 class="list-group-title">{{ group.title }}</h2>
            <ul>
              <li v-for="item in group.items" class="list-group-item" :key="item.id">
                <img v-lazy="item.avatar" class="avatar" />
                <span class="name">{{ item.name }}</span>
              </li>
            </ul>
          </li>
        </ul>
        <div class="list-shortcut">
          <ul>
            <li
              v-for="(item, index) in shortcutList"
              class="item"
              :data-index="index"
              :key="item.id"
              @touchstart="onShortcutStart"
              @touchmove.stop.prevent="onShortcutMove"
              :class="{'current': currentIndex === index}"
            >{{ item }}</li>
          </ul>
        </div>
      </div>
    </div>
    <main-tab-bar></main-tab-bar>
  </div>
</template>

<script>
import BScroll from "better-scroll";
import MainTabBar from "@/components/common/tabbar/MainTabBar";
export default {
  components: {
    MainTabBar,
  },
  data() {
    return {
      singers: [
        {
          title: "热门",
          items: [
            {
              id: 6452,
              name: "周杰伦",
              avatar:
                "http://p3.music.126.net/o-FjCrUlhyFC96xiVvJZ8g==/109951163111191410.jpg",
            },
            {
              id: 2116,
              name: "陈奕迅",
              avatar:
                "http://p4.music.126.net/_d1scu7z_1dmd0Zgv9mTLA==/19165587183900212.jpg",
            },
            {
              id: 5781,
              name: "薛之谦",
              avatar:
                "http://p4.music.126.net/ULlwJ2drOfYv-f6-_7jGGQ==/3250156379592966.jpg",
            },
            {
              id: 126339,
              name: "BIGBANG",
              avatar:
                "http://p4.music.126.net/H4Lh45kDfeb1Ke7THhNWjQ==/109951163109244011.jpg",
            },
            {
              id: 3684,
              name: "林俊杰",
              avatar:
                "http://p3.music.126.net/cnGpIQ6rQCKVrDyVVSpzeg==/3263350518850877.jpg",
            },
            {
              id: 96266,
              name: "Maroon 5",
              avatar:
                "http://p3.music.126.net/h-ynyQrpyIvfJeW_DeaqHA==/1385384666932895.jpg",
            },
            {
              id: 9621,
              name: "王菲",
              avatar:
                "http://p4.music.126.net/GKhjgN1ltQYK3eYf9DdJwg==/18727981557622763.jpg",
            },
            {
              id: 4292,
              name: "李荣浩",
              avatar:
                "http://p4.music.126.net/tpH_HIHPDjRZep1pJC3q2w==/109951163062593811.jpg",
            },
            {
              id: 7763,
              name: "G.E.M.邓紫棋",
              avatar:
                "http://p4.music.126.net/r7uMnwjWpYMuQI_3ZTg56A==/18528969953189760.jpg",
            },
            {
              id: 6460,
              name: "张学友",
              avatar:
                "http://p3.music.126.net/1JG8Uwzb5XAJXaPUHR6RBw==/3238061747024716.jpg",
            },
          ],
        },
        {
          title: "A",
          items: [
            {
              id: 46487,
              name: "Adele",
              avatar:
                "http://p4.music.126.net/6iuRSwLHGrjp3RJH86tfuQ==/3261151495434554.jpg",
            },
            {
              id: 1045123,
              name: "Alan Walker",
              avatar:
                "http://p4.music.126.net/AsrGD4Sf0HWJ3mK-Y__PLw==/18981968742063387.jpg",
            },
            {
              id: 7063,
              name: "A-Lin",
              avatar:
                "http://p4.music.126.net/8iSt6sAD819N3juz-bu2vQ==/1379887107721899.jpg",
            },
            {
              id: 48161,
              name: "Ariana Grande",
              avatar:
                "http://p3.music.126.net/hqr3IB1u1UVJKkmxyIvsfA==/18701593278522174.jpg",
            },
            {
              id: 16152,
              name: "Aimer",
              avatar:
                "http://p3.music.126.net/7oFBcNAt1TXGzliOEc3p7g==/109951163112362346.jpg",
            },
            {
              id: 45236,
              name: "Avicii",
              avatar:
                "http://p3.music.126.net/h1wzVYeqth2d2ujPefocGQ==/18588343581208995.jpg",
            },
            {
              id: 46490,
              name: "Avril Lavigne",
              avatar:
                "http://p3.music.126.net/plN1CKu6igIh7fKrE8prWA==/18912699509666227.jpg",
            },
            {
              id: 87066,
              name: "Audio Machine",
              avatar:
                "http://p3.music.126.net/C4QsdeWjFi_ZrDAxUrF0MQ==/109951163187133601.jpg",
            },
          ],
        },
        {
          title: "B",
          items: [
            {
              id: 126339,
              name: "BIGBANG",
              avatar:
                "http://p4.music.126.net/H4Lh45kDfeb1Ke7THhNWjQ==/109951163109244011.jpg",
            },
            {
              id: 178059,
              name: "Bruno Mars",
              avatar:
                "http://p3.music.126.net/Zf1ESZwNs0MaiqLBAZ2PWQ==/18723583511044011.jpg",
            },
            {
              id: 11127,
              name: "Beyond",
              avatar:
                "http://p4.music.126.net/wuaNikQW2tPPFN0Oe5Rk9w==/80264348845616.jpg",
            },
            {
              id: 783124,
              name: "BTS (防弹少年团)",
              avatar:
                "http://p3.music.126.net/YHtpXGyzCv093GLtujr1cQ==/109951163064390008.jpg",
            },
          ],
        },
        {
          title: "C",
          items: [
            {
              id: 2116,
              name: "陈奕迅",
              avatar:
                "http://p4.music.126.net/_d1scu7z_1dmd0Zgv9mTLA==/19165587183900212.jpg",
            },
            {
              id: 89365,
              name: "Coldplay",
              avatar:
                "http://p4.music.126.net/eL-ft_ucUcby648eVnNewA==/19162288649094558.jpg",
            },
            {
              id: 1007170,
              name: "陈粒",
              avatar:
                "http://p3.music.126.net/Q92YwJrk2f2tsK-7B0VIhQ==/6628955605123612.jpg",
            },
            {
              id: 2112,
              name: "陈小春",
              avatar:
                "http://p3.music.126.net/WA-eUvljuoahxnENnwqx1g==/172623325577460.jpg",
            },
            {
              id: 90331,
              name: "Charlie Puth",
              avatar:
                "http://p4.music.126.net/jKGxUbCYhy5aaKlvlrLM2w==/109951163040583012.jpg",
            },
            {
              id: 50934,
              name: "Carly Rae Jepsen",
              avatar:
                "http://p4.music.126.net/YzpodJ0TyW4ZC587Porasw==/240793046499895.jpg",
            },
            {
              id: 7217,
              name: "陈绮贞",
              avatar:
                "http://p4.music.126.net/bQEPHbVRPhyEnyYNe8zUqA==/153931627905286.jpg",
            },
            {
              id: 159692,
              name: "初音ミク",
              avatar:
                "http://p3.music.126.net/tMz0TTyDO4pJv3FMETjRGw==/109951163021786523.jpg",
            },
          ],
        },
        {
          title: "E",
          items: [
            {
              id: 759509,
              name: "EXO",
              avatar:
                "http://p3.music.126.net/DZ7MuNXFMCcL_v8zyNeygw==/109951163175601143.jpg",
            },
            {
              id: 32665,
              name: "Eminem",
              avatar:
                "http://p4.music.126.net/4nBVmtjIoX5A-QZmLPaHdg==/109951163078482452.jpg",
            },
            {
              id: 33184,
              name: "Ed Sheeran",
              avatar:
                "http://p4.music.126.net/7QK82incNi3k9Gfpot_ykg==/18636722092498224.jpg",
            },
            {
              id: 56598,
              name: "Ellie Goulding",
              avatar:
                "http://p4.music.126.net/dh3LtjjtVjkd33Vb16nBXg==/19019352137349259.jpg",
            },
          ],
        },
        {
          title: "F",
          items: [
            {
              id: 56782,
              name: "Fall Out Boy",
              avatar:
                "http://p4.music.126.net/lPgsuTf0ma76HpXK8ff0jw==/109951163054786259.jpg",
            },
            {
              id: 2738,
              name: "方大同",
              avatar:
                "http://p4.music.126.net/tTZcmIj2RV3ahQ-PvT-fEg==/109951163185998147.jpg",
            },
          ],
        },
        {
          title: "G",
          items: [
            {
              id: 7763,
              name: "G.E.M.邓紫棋",
              avatar:
                "http://p4.music.126.net/r7uMnwjWpYMuQI_3ZTg56A==/18528969953189760.jpg",
            },
            {
              id: 123577,
              name: "G-Dragon",
              avatar:
                "http://p4.music.126.net/0jQmRXv0j-vVGQ5_Z4BliQ==/18725782534592929.jpg",
            },
            {
              id: 2849,
              name: "古巨基",
              avatar:
                "http://p4.music.126.net/dc7JiLEiMpM_MgX0kPPImQ==/5965950092650438.jpg",
            },
            {
              id: 11679,
              name: "GALA",
              avatar:
                "http://p3.music.126.net/P5yFw0wtRt0u1AbxnrZbpw==/109951162908083277.jpg",
            },
          ],
        },
        {
          title: "H",
          items: [
            {
              id: 711683,
              name: "好妹妹",
              avatar:
                "http://p3.music.126.net/vSTfsnbL-kDJ5a7krBYWQg==/3362306558224859.jpg",
            },
            {
              id: 34517,
              name: "Hans Zimmer",
              avatar:
                "http://p3.music.126.net/rnc6wVyR_nM0bfxTBZVAuw==/157230162794113.jpg",
            },
          ],
        },
        {
          title: "I",
          items: [
            {
              id: 160947,
              name: "IU",
              avatar:
                "http://p4.music.126.net/KHy2OOa2omoGt9G11rJtdg==/109951163024470480.jpg",
            },
            {
              id: 94779,
              name: "Imagine Dragons",
              avatar:
                "http://p4.music.126.net/t8pT1oUfIHYl3lfXnQA2Qw==/19213965695579757.jpg",
            },
          ],
        },
        {
          title: "J",
          items: [
            {
              id: 35531,
              name: "Justin Bieber",
              avatar:
                "http://p4.music.126.net/UHRt8pyx3YrXD8OTEC2TMA==/18545462627712464.jpg",
            },
            {
              id: 893259,
              name: "金玟岐",
              avatar:
                "http://p4.music.126.net/5xovShW1vWSo4CmS3NvNhA==/109951163071307134.jpg",
            },
            {
              id: 14408,
              name: "久石譲",
              avatar:
                "http://p4.music.126.net/QyLSKOuyTI3vWMQgcyJbGA==/3275445145346068.jpg",
            },
            {
              id: 35331,
              name: "Justin Timberlake",
              avatar:
                "http://p4.music.126.net/35zgHg2qN-YrypH-QxD-CA==/109951163111839399.jpg",
            },
          ],
        },
        {
          title: "K",
          items: [
            {
              id: 62888,
              name: "Katy Perry",
              avatar:
                "http://p3.music.126.net/kthCuS87J3gKhafoheYOqA==/19230458369972396.jpg",
            },
          ],
        },
        {
          title: "L",
          items: [
            {
              id: 3684,
              name: "林俊杰",
              avatar:
                "http://p3.music.126.net/cnGpIQ6rQCKVrDyVVSpzeg==/3263350518850877.jpg",
            },
            {
              id: 4292,
              name: "李荣浩",
              avatar:
                "http://p4.music.126.net/tpH_HIHPDjRZep1pJC3q2w==/109951163062593811.jpg",
            },
            {
              id: 3681,
              name: "李志",
              avatar:
                "http://p4.music.126.net/lpuRZG72bxxF8aRKfZ3SFg==/150633093021532.jpg",
            },
            {
              id: 3695,
              name: "李健",
              avatar:
                "http://p4.music.126.net/5C4hU3xFujeEbE6e_AqpwQ==/770757651096525.jpg",
            },
            {
              id: 840134,
              name: "刘瑞琦",
              avatar:
                "http://p3.music.126.net/w0ijYwEUDJV-ifzwibmmYA==/3435973841723920.jpg",
            },
            {
              id: 784453,
              name: "刘思涵",
              avatar:
                "http://p4.music.126.net/d_RA7cWFl0NZ3STNf-d9HQ==/5934064255453343.jpg",
            },
            {
              id: 8325,
              name: "梁静茹",
              avatar:
                "http://p4.music.126.net/zDo8F2ivJ5pFZN6i1zH47Q==/18828037114489745.jpg",
            },
            {
              id: 3699,
              name: "李克勤",
              avatar:
                "http://p3.music.126.net/3XRmZBHvOzxGIBprjRP8hw==/770757651096523.jpg",
            },
            {
              id: 66212,
              name: "Lana Del Rey",
              avatar:
                "http://p4.music.126.net/mHp6kTAkU3ldDKIjqmlCiw==/109951163007544231.jpg",
            },
            {
              id: 95439,
              name: "Linkin Park",
              avatar:
                "http://p3.music.126.net/uxUY64QwAiri3NhBicA2fQ==/109951163050440275.jpg",
            },
            {
              id: 3691,
              name: "刘德华",
              avatar:
                "http://p4.music.126.net/fPgII_A81NULgOPjO1nPKw==/40681930245657.jpg",
            },
          ],
        },
        {
          title: "M",
          items: [
            {
              id: 96266,
              name: "Maroon 5",
              avatar:
                "http://p3.music.126.net/h-ynyQrpyIvfJeW_DeaqHA==/1385384666932895.jpg",
            },
            {
              id: 8926,
              name: "莫文蔚",
              avatar:
                "http://p4.music.126.net/ByXwX59XAoYsY3jwTLvlNQ==/1382086129327137.jpg",
            },
            {
              id: 4592,
              name: "马頔",
              avatar:
                "http://p3.music.126.net/cpfC0E5dtZaChgeao9pNWQ==/2943392628176713.jpg",
            },
          ],
        },
        {
          title: "N",
          items: [
            {
              id: 9061,
              name: "那英",
              avatar:
                "http://p4.music.126.net/tBZrcOqpdhd6Ihjc9ECYUw==/135239930232255.jpg",
            },
          ],
        },
        {
          title: "O",
          items: [
            {
              id: 98105,
              name: "OneRepublic",
              avatar:
                "http://p4.music.126.net/n3sr7bNMdjILj44rYi7Y8g==/18828037115920682.jpg",
            },
            {
              id: 98351,
              name: "One Direction",
              avatar:
                "http://p3.music.126.net/VeW5MJ4tV54WP2bMFHHnag==/109951163008253596.jpg",
            },
            {
              id: 40859,
              name: "Owl City",
              avatar:
                "http://p4.music.126.net/j4uXFu5urMRWpyMCe0pk1g==/18561955301752001.jpg",
            },
          ],
        },
        {
          title: "P",
          items: [
            {
              id: 4721,
              name: "朴树",
              avatar:
                "http://p4.music.126.net/glrZzYJQZXiv51Tj8Uzn8Q==/7951668094170236.jpg",
            },
            {
              id: 41143,
              name: "Pitbull",
              avatar:
                "http://p3.music.126.net/V7BlvkiacVTqP7jf89vydw==/18740076185711645.jpg",
            },
          ],
        },
        {
          title: "R",
          items: [
            {
              id: 72724,
              name: "Rihanna",
              avatar:
                "http://p3.music.126.net/f21NQmJ7Zc_HiIp48RUJqA==/18561955301751999.jpg",
            },
            {
              id: 9269,
              name: "容祖儿",
              avatar:
                "http://p4.music.126.net/RA9xjQ0ABACRcfKwutGDnA==/5946158883315120.jpg",
            },
          ],
        },
        {
          title: "S",
          items: [
            {
              id: 9272,
              name: "孙燕姿",
              avatar:
                "http://p4.music.126.net/nXF_Faa7-ZisQShLlAqyjw==/18791753231401604.jpg",
            },
            {
              id: 5073,
              name: "宋冬野",
              avatar:
                "http://p3.music.126.net/FRS2qHabnha-ZlYyfduX7g==/109951162811536835.jpg",
            },
            {
              id: 12707,
              name: "苏打绿",
              avatar:
                "http://p3.music.126.net/znozXOyHQXRc52hU6UAtmg==/756463999935630.jpg",
            },
            {
              id: 11998039,
              name: "Sunshine",
              avatar:
                "http://p4.music.126.net/wNQy7nRGPipTNHqGzpjlBg==/19218363741953505.jpg",
            },
            {
              id: 740216,
              name: "Sam Smith",
              avatar:
                "http://p4.music.126.net/uVAelYyxyz84xV1UkjJJVQ==/109951163052849432.jpg",
            },
            {
              id: 126793,
              name: "少女时代",
              avatar:
                "http://p4.music.126.net/b4GUHufeoC2tGEgXIQ8htQ==/18703792302097354.jpg",
            },
          ],
        },
        {
          title: "T",
          items: [
            {
              id: 964486,
              name: "Tobu",
              avatar:
                "http://p3.music.126.net/QlOUmYAuEyqKO4g96QM1kQ==/5989039837081565.jpg",
            },
            {
              id: 102714,
              name: "Two Steps From Hell",
              avatar:
                "http://p4.music.126.net/nG3AaqQN4fMQ-Xwhf19Trg==/6027522744141514.jpg",
            },
            {
              id: 44266,
              name: "Taylor Swift",
              avatar:
                "http://p3.music.126.net/lQgY9bF4ZRCK-h5goGxmCg==/109951163245154611.jpg",
            },
            {
              id: 12977,
              name: "逃跑计划",
              avatar:
                "http://p4.music.126.net/Ii8U2ugJxfpWQZvZPZsYwg==/3418381652800638.jpg",
            },
            {
              id: 127815,
              name: "T-ara",
              avatar:
                "http://p3.music.126.net/ZfdxyAleCzBP6ZF2fXa23g==/3419481180607870.jpg",
            },
            {
              id: 5196,
              name: "陶喆",
              avatar:
                "http://p3.music.126.net/HciCtD7swUU_D9wem9NfNA==/6044015418524944.jpg",
            },
            {
              id: 1019952,
              name: "TheFatRat",
              avatar:
                "http://p4.music.126.net/VpsUseY47x0UHz75KKbhtA==/2535473816668478.jpg",
            },
            {
              id: 9489,
              name: "谭维维",
              avatar:
                "http://p3.music.126.net/Szf_ysguX4fe8nznW8otvQ==/3265549576955384.jpg",
            },
          ],
        },
        {
          title: "W",
          items: [
            {
              id: 9621,
              name: "王菲",
              avatar:
                "http://p4.music.126.net/GKhjgN1ltQYK3eYf9DdJwg==/18727981557622763.jpg",
            },
            {
              id: 5346,
              name: "王力宏",
              avatar:
                "http://p4.music.126.net/3sYHMtCKpWIxt9G12yjUTw==/264982302310377.jpg",
            },
            {
              id: 46006,
              name: "Wiz Khalifa",
              avatar:
                "http://p3.music.126.net/V2sOWUWGAAYR5fnDpNz8RQ==/283673999983666.jpg",
            },
            {
              id: 13193,
              name: "五月天",
              avatar:
                "http://p4.music.126.net/nUVLUL0gG1XfTReU-Us1YA==/18642219650661189.jpg",
            },
            {
              id: 45839,
              name: "Westlife",
              avatar:
                "http://p4.music.126.net/pJf8MVcvxLX6HVRKZlcMOA==/18766464464525837.jpg",
            },
          ],
        },
        {
          title: "X",
          items: [
            {
              id: 5781,
              name: "薛之谦",
              avatar:
                "http://p4.music.126.net/ULlwJ2drOfYv-f6-_7jGGQ==/3250156379592966.jpg",
            },
            {
              id: 5770,
              name: "许巍",
              avatar:
                "http://p4.music.126.net/I6I81M7B7_hoeqp9VGg8sw==/568447511584754.jpg",
            },
            {
              id: 5771,
              name: "许嵩",
              avatar:
                "http://p4.music.126.net/2ymAK8YTVExZ1eZ072BBCQ==/8934631487417355.jpg",
            },
            {
              id: 9952,
              name: "谢安琪",
              avatar:
                "http://p4.music.126.net/D60e7K2Hxf1uWDRTlGy3uQ==/244091581382928.jpg",
            },
            {
              id: 5768,
              name: "萧敬腾",
              avatar:
                "http://p4.music.126.net/kIyvVOBtz0sPJMom1ss6tA==/1382086116668101.jpg",
            },
          ],
        },
        {
          title: "Y",
          items: [
            {
              id: 6066,
              name: "杨宗纬",
              avatar:
                "http://p3.music.126.net/Q4JSaV98wuU6xElATsFjAw==/3261151495434543.jpg",
            },
            {
              id: 10204,
              name: "杨千嬅",
              avatar:
                "http://p3.music.126.net/Fy3OSgevuA-iwsy3X_pqpA==/235295488361002.jpg",
            },
          ],
        },
        {
          title: "Z",
          items: [
            {
              id: 6452,
              name: "周杰伦",
              avatar:
                "http://p3.music.126.net/o-FjCrUlhyFC96xiVvJZ8g==/109951163111191410.jpg",
            },
            {
              id: 6460,
              name: "张学友",
              avatar:
                "http://p3.music.126.net/1JG8Uwzb5XAJXaPUHR6RBw==/3238061747024716.jpg",
            },
            {
              id: 6731,
              name: "赵雷",
              avatar:
                "http://p4.music.126.net/w_UWOls2uCkFN_U62788Xg==/18806046882229308.jpg",
            },
            {
              id: 6457,
              name: "张国荣",
              avatar:
                "http://p4.music.126.net/wupRd6PIODPM2gMxmlxD8w==/39582418617683.jpg",
            },
            {
              id: 6462,
              name: "张敬轩",
              avatar:
                "http://p3.music.126.net/7a77DZlspSaBZexOr8mdLw==/18863221486279082.jpg",
            },
            {
              id: 10561,
              name: "张靓颖",
              avatar:
                "http://p4.music.126.net/PDSLSEj5EHvGWeaTy5MqWQ==/109951163064519620.jpg",
            },
            {
              id: 10559,
              name: "张惠妹",
              avatar:
                "http://p4.music.126.net/F9asgcj7C7qSl_je9XDvRw==/603631883675241.jpg",
            },
            {
              id: 6472,
              name: "张杰",
              avatar:
                "http://p4.music.126.net/R4it3K4VVd4qOlMv1VvH_w==/18569651881628300.jpg",
            },
            {
              id: 6652,
              name: "周传雄",
              avatar:
                "http://p3.music.126.net/UXycaJG3B1yhBMidEjqH7w==/211106232550480.jpg",
            },
            {
              id: 6454,
              name: "张信哲",
              avatar:
                "http://p3.music.126.net/dtm0L5L0OtxDzDpnFTqVyg==/3285340750049091.jpg",
            },
          ],
        },
      ],
      scrollY: 0,
      currentIndex: 0,
    };
  },
  created() {
    this.touch = {};
    // 初始化 better-scroll 必须要等 dom 加载完毕
    setTimeout(() => {
      this._initSrcoll();
      this._calculateHeight();
    }, 20);
  },
  methods: {
    _initSrcoll() {
      // console.log('didi')
      this.scroll = new BScroll(this.$refs.listView, {
        probeType: 3,
        click: true,
      });

      this.scroll.on("scroll", (pos) => {
        this.scrollY = pos.y;
      });
    },
    onShortcutStart(e) {
      // 获取到绑定的 index
      let index = e.target.getAttribute("data-index");
      // 使用 better-scroll 的 scrollToElement 方法实现跳转
      this.scrollToElement(index);

      // 记录一下点击时候的 Y坐标 和 index
      let firstTouch = e.touches[0].pageY;
      this.touch.y1 = firstTouch;
      this.touch.anchorIndex = index;
    },
    onShortcutMove(e) {
      // 再记录一下移动时候的 Y坐标，然后计算出移动了几个索引
      let touchMove = e.touches[0].pageY;
      this.touch.y2 = touchMove;
      // 这里的 16.7 是索引元素的高度
      let delta = Math.floor((this.touch.y2 - this.touch.y1) / 16.7);

      // 计算最后的位置
      // * 1 是因为 this.touch.anchorIndex 是字符串，用 * 1 偷懒的转化一下
      let index = this.touch.anchorIndex * 1 + delta;
      this.scrollToElement(index);
    },
    scrollToElement(index) {
      // 处理边界情况
      // 因为 index 通过滑动距离计算出来的
      // 所以向上滑超过索引框框的时候就会 < 0，向上就会超过最大值
      if (index < 0) {
        return;
      } else if (index > this.listHeight.length - 2) {
        index = this.listHeight.length - 2;
      }
      // listHeight 是正的， 所以加个 -
      this.scrollY = -this.listHeight[index];
      this.scroll.scrollToElement(this.$refs.listGroup[index]);
    },
    _calculateHeight() {
      this.listHeight = [];
      const list = this.$refs.listGroup;
      let height = 0;
      this.listHeight.push(height);
      for (let i = 0; i < list.length; i++) {
        let item = list[i];
        height += item.clientHeight;
        this.listHeight.push(height);
      }
    },
  },
  watch: {
    scrollY(newVal) {
      // 向下滑动的时候 newVal 是一个负数，所以当 newVal > 0 时，currentIndex 直接为 0
      if (newVal > 0) {
        this.currentIndex = 0;
        return;
      }

      // 计算 currentIndex 的值
      for (let i = 0; i < this.listHeight.length - 1; i++) {
        let height1 = this.listHeight[i];
        let height2 = this.listHeight[i + 1];

        if (-newVal >= height1 && -newVal < height2) {
          this.currentIndex = i;
          return;
        }
      }

      // 当超 -newVal > 最后一个高度的时候
      // 因为 this.listHeight 有头尾，所以需要 - 2
      this.currentIndex = this.listHeight.length - 2;
    },
  },
  computed: {
    shortcutList() {
      return this.singers.map((group) => {
        return group.title.substr(0, 1);
      });
    },
  },
};
</script>

<style lang="scss">
.box {
  position: fixed;
  width: 100%;
  height: 100%;
}
.list-view {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: rgb(223, 223, 223);
  .list-group {
    padding-bottom: 30px;
    .list-group-title {
      height: 30px;
      line-height: 30px;
      padding-left: 20px;
      font-size: 12px;
      color: #fff;
      background: #c20c0c;
    }
    .list-group-item {
      display: flex;
      align-items: center;
      padding: 20px 0 0 30px;
      .avatar {
        width: 50px;
        height: 50px;
        border-radius: 5%;
      }
      .name {
        margin-left: 20px;
        color: black;
        font-size: 14px;
        // font-weight: 500;
      }
    }
  }
  .list-shortcut {
    position: absolute;
    z-index: 30;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    padding: 20px 0;
    border-radius: 10px;
    text-align: center;
    background: rgba(167, 167, 167, 0.5);
    font-family: Helvetica;
    .item {
      padding: 3px;
      line-height: 1;
      color: black;
      font-size: 11px;
      &.current {
        color: #c20c0c;
        // font-weight: bold;
      }
    }
  }
}
</style>
